import React from 'react';
import { inject, observer } from 'mobx-react';
import {
  WeaTab,
  WeaBrowser,
  WeaLocaleProvider,
} from 'ecCom';
import { Row, Col, Spin } from 'antd';
import { toJS } from 'mobx';

const store = [
  'docCenterStore',
  'routing',
];
const getLabel = WeaLocaleProvider.getLabel;
@inject(...store)

@observer
class CenterRight extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      docList: this.props.docList || [],
      docListOfPartner: this.props.docListOfPartner || [],
      searchType:['base'],
    };
  }
  componentDidMount() {
  }
  componentWillReceiveProps(nextProps) {
    const { docList, docListOfPartner } = this.props;
    if (docList !== nextProps.docList) {
      this.setState({ docList: nextProps.docList });
    }
    if (docListOfPartner !== nextProps.docListOfPartner) {
      this.setState({ docListOfPartner: nextProps.docListOfPartner });
    }
  }
  componentWillUnmount() {
  }
  getList= (ListArray) => {
    const { docCenterStore } = this.props;
    const { selectedKeyTabInfo } = docCenterStore;
    const tempContent = ListArray.map((item, index) =>
      // 判断当前获取的数据与tab选择的值是否一致
      // icon-document-currency
       (
          <li className="centerright-main-list" key={index}>
            <span className={item.docextendname}
              style={item.docextendname == 'icon-document-currency' ? { color: '#618195' } : {}}
            />
            <ul className="centerright-main-ul">
              <li className="centerright-doctext centerright-article"
                onClick={() => {
                const { docCenterStore } = this.props;
                const { getDocList } = docCenterStore;
                const width = screen.availWidth - 10;
                const height = screen.availHeight - 50;
                let szFeatures = `top=0,left=0,width=${width},height=${height},directories=no` +
                  ',status=yes,toolbar=no,location=no,menubar=no,srollbars=yes,resizables=yes';
                window.open(`/spa/document/index.jsp?id=${item.docid}#/main/document/detail`, '_blank', szFeatures);
                if (selectedKeyTabInfo === '0') {
                  setTimeout(() => {
                    getDocList({ pageSize: 5, viewcondition: selectedKeyTabInfo, docsubject: '' });
                  }, 1500);
                }
              }}
              >{item.docsubject}
              </li>
              <li>
                <ul>
                  <li>
                    <a href={`javaScript:openhrm(${item.userid});`}
                      onClick={() => {
 pointerXY(event); 
}}
                      title={`${item.username}`}
                      className="centerright-main-hover"
                    >
                      {item.username}
                    </a>
                    <span>{item.createtime}</span>
                  </li>
                </ul>
                <div className="centerright-main-div wea-f14">
               {
                 item.params.map(iteml => (
                     <div>
                       <span className={iteml.icon} />
                       <span>{iteml.num}</span>
                     </div>
                   ))
               }
             </div>
              </li>
             </ul>

          </li>
        ),
      );
    return tempContent;
  }
  getListOfPartner = (ListArray) => {
    const tempContent = ListArray.map((item, index) => {
      const lengthOfListArray = ListArray.length - 1;
      if (index !== lengthOfListArray) {
        return (
          <li className="centerright-main-list" key={index}>
            <img src={`${item.userphoto}`} />
            <ul className="centerright-main-ul">
              <li>
                <a href={`javaScript:openhrm(${item.userid});`}
                  onClick={() => {
 pointerXY(event); 
}}
                  title={`${item.username}`}
                  className="centerright-main-hoverl"
                >
                  {item.username}
                </a>
                <span className="centerright-span-text" >{item.createtime}</span>
              </li>
              <li>
                <ul>
                  <li className="centerright-li-text centerright-article"
                    onClick={() => {
                    const width = screen.availWidth - 10;
                    const height = screen.availHeight - 50;
                    let szFeatures = `top=0,left=0,width=${width},height=${height},directories=no` +
                      ',status=yes,toolbar=no,location=no,menubar=no,srollbars=yes,resizables=yes';
                    window.open(`/spa/document/index.jsp?id=${item.docid}#/main/document/detail`, '_blank', szFeatures);
                  }}
                  >
                    {item.docsubject}
                   {/* <span dangerouslySetInnerHTML={{ __html: item.docsubject }} ></span> */}
                  </li>
                </ul>
              </li>
            </ul>
            <div className="centerright-main-div">
              {
                item.params.map(iteml => (
                    <div>
                      <span className={iteml.icon} />
                      <span>{iteml.num}</span>
                    </div>
                  ))
              }
            </div>
          </li>
        );
      }
        return (
          <li className="centerright-main-list-end" key={index}>
            <img src={`${item.userphoto}`} />
            <ul className="centerright-main-ul">
              <li>
                <a href={`javaScript:openhrm(${item.userid});`}
                  onClick={() => {
 pointerXY(event); 
}}
                  title={`${item.username}`}
                  className="centerright-main-hoverl"
                >
                  {item.username}
                </a>
                <span className="centerright-span-text" >{item.createtime}</span>
              </li>
              <li>
                <ul>
                  <li className="centerright-li-text centerright-article"
                    onClick={() => {
                    const width = screen.availWidth - 10;
                    const height = screen.availHeight - 50;
                    let szFeatures = `top=0,left=0,width=${width},height=${height},directories=no` +
                      ',status=yes,toolbar=no,location=no,menubar=no,srollbars=yes,resizables=yes';
                    window.open(`/spa/document/index.jsp?id=${item.docid}#/main/document/detail`, '_blank', szFeatures);
                  }}
                  >
                    {item.docsubject}
                    {/* <span dangerouslySetInnerHTML={{ __html: item.docsubject }} ></span> */}
                  </li>
                </ul>
                <div className="centerright-main-div wea-f14">
              {
                item.params.map(iteml => (
                    <div>
                      <span className={iteml.icon} />
                      <span>{iteml.num}</span>
                    </div>
                  ))
              }
            </div>
              </li>
            </ul>

          </li>
        );
    });
    return tempContent;
  }
  changeData= (theKey) => {
    const { docCenterStore } = this.props;
    const { getDocList, setSelectedKeyTabInfo } = docCenterStore;
    setSelectedKeyTabInfo(theKey);
    getDocList({ pageSize: 5, viewcondition: theKey, docsubject: '' });
    this.setState({ docList: [] });
  }
  changeDataOfpartner= (theKey) => {
    const { docCenterStore } = this.props;
    const { getDocListOfPartner, setSelectedKeyTabInfoOfPartner } = docCenterStore;
    setSelectedKeyTabInfoOfPartner(theKey);
    if (theKey !== '3') {
    	getDocListOfPartner({ pageSize: 100, viewcondition: theKey, docsubject: '' });
      docCenterStore.searchValue = '';
      docCenterStore.searchDatas = [];
    } else {
      docCenterStore.hasMorePartner = false;
    }
    this.setState(
      {
        docListOfPartner: [],
      },
    );
  }
  onTabSearch=(value) => {
    const { docCenterStore, routing } = this.props;
    const {  selectedKeyTabInfo } = docCenterStore;
    if (routing) {
      let pathname = {
        pathname: '/main/document/search',
        query: { viewcondition: '1', docsubject: value },
        state: {
          prePath: '/main/document/center',
          prePathName: getLabel(132038, '知识中心'),
        },
      };
      if (selectedKeyTabInfo === '1') {
        pathname.query.viewcondition = '2';
        pathname.query.getMost = 'reply';
      } else if (selectedKeyTabInfo === '2') {
        pathname.query.viewcondition = '2';
        pathname.query.getMost = 'read';
      } else if (selectedKeyTabInfo === '3') {
        pathname.query.viewcondition = '2';
        pathname.query.getMost = 'download';
      } else if (selectedKeyTabInfo === '4') {
        pathname.query.viewcondition = '2';
        pathname.query.getMost = 'score';
      }
      routing.push(pathname);
    }
  }

  onMoreClick=() => {
    const { docCenterStore, routing } = this.props;
    const {  selectedKeyTabInfo } = docCenterStore;
    if (routing) {
      const pathname = {
        pathname: '/main/document/search',
        query: {
          viewcondition: '1',
        },
        state: {
          prePath: '/main/document/center',
          prePathName: getLabel(132038, '知识中心'),
        },
      };
      if (selectedKeyTabInfo === '1') {
        pathname.query.viewcondition = '2';
        pathname.query.getMost = 'reply';
      } else if (selectedKeyTabInfo === '2') {
        pathname.query.viewcondition = '2';
        pathname.query.getMost = 'read';
      } else if (selectedKeyTabInfo === '3') {
        pathname.query.viewcondition = '2';
        pathname.query.getMost = 'download';
      } else if (selectedKeyTabInfo === '4') {
        pathname.query.viewcondition = '2';
        pathname.query.getMost = 'score';
      }
      routing.push(pathname);
    }
  }
  onRefresh=() => {
    const { docCenterStore } = this.props;
    const {  selectedKeyTabInfo,getDocList } = docCenterStore;
    getDocList({ pageSize: 5, viewcondition: selectedKeyTabInfo, docsubject: '' });
  }
  onPartnerRefresh=() => {
    // getDocList({ pageSize: 5, viewcondition: selectedKeyTabInfo, docsubject: '' })
   // this.changeDataOfpartner({selectedKeyTabInfoOfPartner})
    const { docCenterStore } = this.props;
    const {  getDocListOfPartner,selectedKeyTabInfoOfPartner } = docCenterStore;
    getDocListOfPartner({ pageSize: 100, viewcondition: selectedKeyTabInfoOfPartner, docsubject: '', userids: docCenterStore.searchValue });
  }
  onSpecialUserChange=(id, names, datas) => {
    const { docCenterStore } = this.props;
    const {  getDocListOfPartner,selectedKeyTabInfoOfPartner } = docCenterStore;
    if (id === '') {
      docCenterStore.docListOfPartner = [];
      localStorage.setItem('docListOfPartner3', '');
    } else {
      getDocListOfPartner({ pageSize: 100, viewcondition: selectedKeyTabInfoOfPartner, docsubject: '', userids: id });
    }
    docCenterStore.searchValue = id;
    docCenterStore.searchDatas = datas;
  }
  onMorePartnerClick=() => {
    const {lengthOfPartner, setLengthOfPartner}=this.props.docCenterStore;
    setLengthOfPartner(lengthOfPartner);
  }
  render() {
    const { docListOfPartner = [] } = this.state;
    const { docCenterStore } = this.props;
    const { tabInfo, tabInfoOfPartner
      , loadingDocList, loadingDocListPartner
      , selectedKeyTabInfo, selectedKeyTabInfoOfPartner, docList
      , searchValue, lengthOfPartner, setLengthOfPartner
      , hasMorePartner } = docCenterStore;
    let content = this.getList(docList);
    if (content.length === 0 && !loadingDocList) {
      content = (
        <div className="centerright-contentempty wea-f14">
          <div className="icon-coms-blank centerright-icon-blank" />
          <div>{getLabel(83553, '暂无数据')}</div>
        </div>
      );
    }
    let contentOfPartner = docListOfPartner ? this.getListOfPartner(docListOfPartner.slice(0, lengthOfPartner)) : [];
    if (contentOfPartner.length === 0 && !loadingDocListPartner) {
      if (selectedKeyTabInfoOfPartner === '3') {
        if (searchValue === '') {
          contentOfPartner = (
            <div className="centerright-contentempty wea-f14">
              <img src={'/spa/document/images/blank.png'} />
              <div>{getLabel(385105, '请选择需要指定的用户')}</div>
            </div>
          );
        } else {
          contentOfPartner = (
            <div className="centerright-contentempty wea-f14">
              <div className="icon-coms-blank centerright-icon-blank" />
              <div>{getLabel(83553, '暂无数据')}</div>
            </div>
          );
        }
      } else {
        contentOfPartner = (
          <div className="centerright-contentempty wea-f14">
            <div className="icon-coms-blank centerright-icon-blank" />
            <div>{getLabel(83553, '暂无数据')}</div>
          </div>
        );
      }
    }
    return (
      <div>
        <div className="centerright-main">
          <div className="centerright-main-top">
            <span className="icon-document-Recommend-doc" />
            <span className="centerright-text-bolder">{getLabel(385106, '阅读推荐')}&nbsp;&nbsp;({getLabel(28662, '最近六个月')})</span>
            <span className="icon-coms-Refresh"
              onClick={this.onRefresh}
            />
          </div>
          <div className="centerright-main-content">
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@warx7g`}
              datas={tabInfo}
              searchType={this.state.searchType}
              keyParam="viewcondition"
              selectedKey={selectedKeyTabInfo}
              onChange={this.changeData}
              searchsBaseValue={''}
              onSearch={this.onTabSearch}
            />
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ux1cp8`} spinning={loadingDocList}>
              { loadingDocList ? (
                <ul style={{ minHeight: '375px' }}>{content}</ul>
              ) : (<ul>{content}</ul>)
              }
              {
                !loadingDocList && (
                  <div className="centerright-main-more">
                    <a onClick={this.onMoreClick}
                    >
                      <span>{getLabel(81408, '查看更多')}</span>
                      <span className="icon-coms-up rotate-right" />
                    </a>
                  </div>
                )
              }
            </Spin>
          </div>
        </div>
        <div className="centerright-main">
          <div className="centerright-main-top">
            <span className="icon-document-Partner" />
            <span className="centerright-text-bolder">{getLabel(385107, '我的小伙伴们都在看什么')}</span>
            <span className="icon-coms-Refresh"
              onClick={this.onPartnerRefresh}
            />
          </div>
          <div className="centerright-main-content">
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hfx04y`}>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ewxk3c`} span={20}>
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@dxm74g`}
                  datas={tabInfoOfPartner}
                  keyParam="viewcondition"
                  countParam="groupid"
                  selectedKey={selectedKeyTabInfoOfPartner}
                  onChange={this.changeDataOfpartner}
                />
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dmzudi`} span={4} style={{ height: '47px', borderBottom: '1px solid #eaeaea' }}>
                {
                  selectedKeyTabInfoOfPartner === '3' && (
                    <div className="centerright-specialuser">
                      <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@0xybfe`} {...tabInfoOfPartner[tabInfoOfPartner.length - 1].selectLinkageDatas.browserConditionParam}
                        replaceDatas={docCenterStore.searchDatas}
                        placeholder={getLabel(385108, '请输入指定用户')}
                        onChange={this.onSpecialUserChange}
                      />
                    </div>
                  )
                }
              </Col>
            </Row>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@e2ru7u`} spinning={loadingDocListPartner}>
              { loadingDocListPartner ? (
                  <ul style={{ minHeight: '375px' }}>{contentOfPartner}</ul>
                ) : (<ul>{contentOfPartner}</ul>)
              }
              {
                !loadingDocListPartner && hasMorePartner && (
                      <div className="centerright-main-more">
                        <a onClick={this.onMorePartnerClick}
                        >
                          <span>{getLabel(81408, '查看更多')}</span>
                          <span className="icon-coms-down rotate-right rotate-down" />
                        </a>
                      </div>
                    )
              }
            </Spin>
          </div>
        </div>
      </div>
    );
  }
}
export default CenterRight;

